<template>
  <BaseMainSlot :show-tab="true">
    <!-- 加工作业记录 -->
    <template v-slot:btn-box>
      <ActionBar
        :page-no="24"
        :add-active="addActive"
        :del-active="delActive"
        @add="add"
        @del="del"
      />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="seach-box">
          <div class="select-box-content">
            <div class="select-box-content-name">加工作业名称：</div>
            <el-input
              v-model="querylist.processingTaskName"
              placeholder="请输入加工作业名称"
              clearable
            />
          </div>
          <div v-if="processBatchType === '自主生产'" class="select-box-content">
            <div class="select-box-content-name">关联加工批次：</div>
            <!-- <el-select
              v-model="querylist.processBatchNo"
              placeholder="请输入关联加工批次"
              clearable
            >
              <el-option
                v-for="item in batchList"
                :key="item.processBatchNo"
                :label="item.processBatchName"
                :value="item.processBatchNo"
              />
            </el-select>-->
            <el-input
              v-model="querylist.processBatchName"
              placeholder="请输入关联加工批次"
              clearable
            />
          </div>
          <div v-if="processBatchType === '委托加工'" class="select-box-content">
            <div class="select-box-content-name">委托加工单位：</div>
            <el-select
              v-model="querylist.manufacturingName"
              placeholder="请选择加工单位"
              clearable
            >
              <el-option
                v-for="item in manufacturingList"
                :key="item.manufacturingNo"
                :label="item.manufacturingName"
                :value="item.manufacturingName"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工产品：</div>
            <el-select
              v-model="querylist.productMaterialNo"
              placeholder="请选择加工产品"
              clearable
            >
              <el-option
                v-for="item in productMaterialList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">操作人：</div>
            <el-select
              v-model="querylist.personNo"
              placeholder="请选择操作人"
              clearable
            >
              <el-option
                v-for="item in personList"
                :key="item.personNo"
                :label="item.person.name"
                :value="item.personNo"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工时间：</div>
            <el-date-picker
              v-model="querylist.startTime"
              :picker-options="beginDate()"
              type="date"
              value-format="yyyy-MM-dd 00:00:00"
              placeholder="开始时间"
            />
            <el-date-picker
              v-model="querylist.endTime"
              :picker-options="processDate()"
              type="date"
              value-format="yyyy-MM-dd 23:59:59"
              placeholder="结束时间"
            />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:tab-select>
      <SelectButton
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="batchstaumet"
      />
    </template>
    <template v-slot:table-box>
      <tdtable
        :page="page"
        :title="title"
        :prop-list="propList"
        :table-data="tableData"
        :show-select-column="showSelectColumn"
        :show-index-column="showIndexColumn"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:processTime="{row}">
          <span
            v-if="row.processingTaskNo"
          >{{ row.startTime }}--{{ row.endTime }}</span>
        </template>
        <template v-slot:edit="{row}">
          <div v-if="row.processingTaskNo" class="pointer" @click="edit(row)">
            <i class="el-icon-edit"></i>修改
          </div>
        </template>
        <template v-slot:processEquip="{row}">
          <div
            v-if="row.processingTaskNo"
            class="pointer"
            @click="lookEquip(row)"
          >
            <i class="el-icon-view"></i>查看设备
          </div>
        </template>
        <template v-slot:technologicalParam="{row}">
          <div
            v-if="row.processingTaskNo"
            class="pointer"
            @click="showTegparamDialog(row)"
          >
            <i class="el-icon-view"></i>查看工艺参数
          </div>
        </template>
      </tdtable>
    </template>
    <template v-slot:dialog>
      <TechnologicalParam
        :show="isShowTegparam"
        :process-params-list="processParamsList"
        @closeDialog="closeTegparamDialog"
      />
      <EquipDialog
        :show="showEquip"
        :equip-list="equipList"
        @closeDialog="closeEquipDialog"
      />
      <AddEditDialog
        :manufacturing-list="manufacturingList"
        :title-text="titleText"
        :show="show"
        :process-batch-type="processBatchType"
        :production-options="productMaterialList"
        :production-line-options="productionLineOptions"
        :raw-material-options="rawMaterialOptions"
        :raw-material-batch-options="rawMaterialBatchOptions"
        :process-batch-no="processBatchNo"
        :form-data-copy="formDataCopy"
        @rawMaterialChange="rawMaterialChange"
        @addEvent="addEvent"
        @closeDialog="closeDialog"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import EquipDialog from "../components/equip-dia.vue";
import AddEditDialog from "../components/add-edit-dialog";
import ActionBar from "@/components/ActionBar/index1.vue";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
// import Pagination from "@/components/Pagination";
import SelectButton from "@/components/selectbutton/index.vue";
import SearchBox from "@/components/SearchBox/index.vue";
import tdtable from "@/components/table/index.vue";
import TechnologicalParam from "../components/process-param-dia.vue";
import processingPrtApi from "@/api/processing-management/basic-info-manage/processing-material-manage/index";
import productionLineApi from "@/api/processing-management/basic-info-manage/production-line-manage/index";
import processTaskApi from "@/api/processing-management/process-management/processing-task";
import productionApi from "@/api/processing-management/basic-info-manage/processing-product-manage/index";
import entrustedApi from "@/api/processing-management/basic-info-manage/entrusted-processing-unit-manage/index";
import ProcessBatchApi from "@/api/processing-management/process-batch-manage/process-batch-creation/index";
import { mymixin } from "@/utils/mixin";
export default {
  name: "ProcessBatchQuery",
  components: {
    // Pagination,
    BaseMainSlot,
    SelectButton,
    tdtable,
    ActionBar,
    TechnologicalParam,
    SearchBox,
    EquipDialog,
    AddEditDialog
  },
  mixins: [mymixin],
  data() {
    return {
      batchList: [],
      titleText: "",
      formDataCopy: {},
      productionLineOptions: [], // 产线
      manufacturingList: [], // 加工单位
      personList: [], // 人员
      querylist: {
        processingTaskName: "",
        processBatchName: "",
        productMaterialNo: "",
        personNo: "",
        startTime: "",
        endTime: "",
        manufacturingName: ""
      },
      processBatchNo: "",
      rawMaterialOptions: [], // 原料
      rawMaterialBatchOptions: [], // 原料批次
      productMaterialList: [], // 产品
      showEquip: false,
      equipList: [],
      formData: {},
      tableData: [],
      addActive: true,
      delActive: false,
      isShowTegparam: false,
      processParamsList: [],
      show: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      processBatchType: "自主生产", // 加工类型
      buttonselectlist: [{ name: "自主生产" }, { name: "委托加工" }],
      title: "加工批次列表",
      propList: [
        { prop: "processingTaskName", label: "加工作业名称", minWidth: "100" },
        {
          prop: "processBatchNo",
          label: "关联加工批次",
          minWidth: "100",
          show: false
        },
        {
          prop: "manufacturingName",
          label: "委托加工单位",
          minWidth: "100",
          slotName: "unitName",
          show: true
        },
        { prop: "productMaterialName", label: "加工产品", minWidth: "100" },
        {
          prop: "productionLineName",
          label: "加工产线",
          minWidth: "100",
          show: false
        },
        { prop: "productionProcessesName", label: "关联工序", minWidth: "100" },
        { prop: "pch", label: "加工量", minWidth: "100", show: true },
        { prop: "pch", label: "加工产品等级", minWidth: "100", show: true },
        {
          prop: "processEquip",
          label: "加工设备",
          minWidth: "100",
          slotName: "processEquip",
          show: false
        },
        {
          prop: "technologicalParam",
          label: "工艺参数",
          minWidth: "120",
          slotName: "technologicalParam",
          show: false
        },
        { prop: "personName", label: "处理人", minWidth: "100" },
        {
          prop: "endTime",
          label: "任务完成时间",
          minWidth: "130",
          show: false
        },
        { prop: "startTime", label: "作业时间", minWidth: "130", show: true },
        {
          prop: "status",
          label: "状态",
          minWidth: "100"
        }
        // { label: "操作", minWidth: "120", slotName: "edit", show: true }
      ],
      // 显示序号
      showIndexColumn: true,
      showSelectColumn: true,
      handleSelectList: []
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getProductionOptions();
    this.getPersonOptions();
    this.getEntrustedOptions();
    this.getProductionLineOptions();
    this.getRawMaterialOptions();
    this.getAllBatchList();
  },
  methods: {
    // 限制前面日期不能低于后面日期
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.querylist.endTime) {
            //  如果结束时间不为空，则小于结束时间
            return new Date(self.querylist.endTime).getTime() < time.getTime();
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.querylist.startTime) {
            //  如果开始时间不为空，则结束时间大于开始时间
            self.time = new Date();
            return (
              new Date(self.querylist.startTime).getTime() > time.getTime()
            );
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    batchstaumet(i) {
      if (i === 0) {
        this.processBatchType = "自主生产";
        this.titleText = "自主生产添加";
        this.querylist = {
          processingTaskName: "",
          processBatchName: "",
          productMaterialName: "",
          personNo: "",
          startTime: ""
        };
        this.propList = [
          {
            prop: "processingTaskName",
            label: "加工作业名称",
            minWidth: "100"
          },
          {
            prop: "processBatchName",
            label: "关联加工批次",
            minWidth: "100",
            show: false
          },
          {
            prop: "manufacturingName",
            label: "委托加工单位",
            minWidth: "100",
            slotName: "unitName",
            show: true
          },
          { prop: "productMaterialName", label: "加工产品", minWidth: "100" },
          {
            prop: "productionLineName",
            label: "加工产线",
            minWidth: "100",
            show: false
          },
          {
            prop: "productionProcessesName",
            label: "关联工序",
            minWidth: "100"
          },
          { prop: "pch", label: "加工量", minWidth: "100", show: true },
          { prop: "pch", label: "加工产品等级", minWidth: "100", show: true },
          {
            prop: "processEquip",
            label: "加工设备",
            minWidth: "100",
            slotName: "processEquip",
            show: false
          },
          {
            prop: "jgcx",
            label: "工艺参数",
            minWidth: "120",
            slotName: "technologicalParam",
            show: false
          },
          { prop: "personName", label: "处理人", minWidth: "100" },
          {
            prop: "endTime",
            label: "任务完成时间",
            minWidth: "130",
            show: false
          },
          { prop: "startTime", label: "作业时间", minWidth: "130", show: true },
          {
            prop: "status",
            label: "状态",
            minWidth: "100"
          }
          // { label: "操作", minWidth: "120", slotName: "edit", show: true }
        ];
      }
      if (i === 1) {
        this.processBatchType = "委托加工";
        this.titleText = "委托加工添加";
        this.querylist = {
          processingTaskName: "",
          productMaterialName: "",
          personNo: "",
          startTime: "",
          manufacturingName: ""
        };
        this.propList = [
          {
            prop: "processingTaskName",
            label: "加工作业名称",
            minWidth: "100"
          },
          {
            prop: "processBatchName",
            label: "关联加工批次",
            minWidth: "100",
            show: true
          },
          {
            prop: "manufacturingName",
            label: "委托加工单位",
            minWidth: "100",
            slotName: "manufacturingName",
            show: false
          },
          { prop: "productMaterialName", label: "加工产品", minWidth: "100" },
          {
            prop: "productionLineName",
            label: "加工产线",
            minWidth: "100",
            show: true
          },
          {
            prop: "productionProcessesName",
            label: "关联工序",
            minWidth: "100"
          },
          { prop: "output", label: "加工量", minWidth: "100", show: false },
          {
            prop: "grade",
            label: "加工产品等级",
            minWidth: "100",
            show: false
          },
          {
            prop: "processEquip",
            label: "加工设备",
            minWidth: "100",
            slotName: "processEquip",
            show: true
          },
          {
            prop: "technologicalParam",
            label: "工艺参数",
            minWidth: "120",
            slotName: "technologicalParam",
            show: true
          },
          { prop: "personName", label: "处理人", minWidth: "100" },
          {
            prop: "endTime",
            label: "任务完成时间",
            minWidth: "130",
            show: true
          },
          {
            prop: "startTime",
            label: "作业时间",
            minWidth: "250",
            show: false,
            slotName: "processTime"
          },
          {
            prop: "status",
            label: "状态",
            minWidth: "100"
          }
          // { label: "操作", minWidth: "120", slotName: "edit", show: false }
        ];
      }
      this.search();
    },
    // 获取产品
    getProductionOptions() {
      productionApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          res.data.forEach(item => {
            list.push({
              name: item.material.materialName,
              value: item.material.materialNo
            });
          });
          this.productMaterialList = list;
        }
      });
    },
    // 获取产线选项
    getProductionLineOptions() {
      productionLineApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          // 提供表头搜索数据
          res.data.forEach(item => {
            list.push({
              name: item.productionLineName,
              value: item.productionLineNo
            });
          });
          console.log(list);
          this.productionLineOptions = list;
        }
      });
    },
    // 获取原料选项
    getRawMaterialOptions() {
      processingPrtApi.queryList().then(res => {
        if (res.code === 1) {
          let list = [];
          // 提供表头搜索数据
          res.data.forEach(item => {
            list.push({
              name: item.material.materialName,
              value: item.materialNo
            });
          });
          this.rawMaterialOptions = list;
        }
      });
    },
    // 获取加工批次号
    getInputStorageNo() {
      ProcessBatchApi.generateNo().then(res => {
        if (res.code === 1) {
          this.processBatchNo = res.data;
        }
      });
    },
    // 获取作业人数组
    getPersonOptions() {
      processTaskApi.personQuery().then(res => {
        if (res.code === 1) {
          this.personList = res.data;
        }
      });
    },
    // 获取加工单位
    getEntrustedOptions() {
      entrustedApi.queryByConditionList({}).then(res => {
        if (res.code === 1) {
          this.manufacturingList = res.data;
        }
      });
    },
    rawMaterialChange(val) {
      this.getRawMaterialBatchOptions(val);
    },
    // 查询所有批次
    getAllBatchList() {
      ProcessBatchApi.queryByConditionList({
        processBatchType: this.processBatchType
      }).then(res => {
        if (res.code === 1) {
          this.batchList = res.data;
        }
      });
    },
    // 获取批次信息
    getRawMaterialBatchOptions(val) {
      let parms = {
        materialNo: val
      };
      ProcessBatchApi.rawMaterialQueryByCondition(parms).then(res => {
        if (res.code === 1) {
          this.rawMaterialBatchOptions = res.data;
        }
      });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryPageList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryPageList();
    },
    // 保存
    addEvent(formData) {
      let params = { ...formData, processBatchType: this.processBatchType };
      if (this.handle === "add") {
        ProcessBatchApi.addRecord(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
      if (this.handle === "edit") {
        ProcessBatchApi.addRecord(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
    },
    // 选中table行点击事件
    handleSelectionChange(val) {
      console.log(val);
      this.handleSelectList = [];
      this.handleSelectList = val.map(item => item.processingTaskNo);
      if (this.handleSelectList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 显示添加弹出框add&edit
    showDialog(formData) {
      this.show = true;
      if (formData) {
        console.log("formData", formData);
      }
    },
    lookEquip(row) {
      this.showEquip = true;
      this.equipList = row.processesEquMapperList;
    },
    closeDialog(e) {
      this.show = false;
    },
    // 查看工艺参数
    showTegparamDialog(row) {
      this.isShowTegparam = true;
      this.processParamsList = row.taskCraftList;
    },
    closeEquipDialog() {
      this.showEquip = false;
    },
    closeTegparamDialog() {
      this.isShowTegparam = false;
    },
    // 修改
    edit(row) {
      console.log(row);
      this.show = true;
      this.handle = "edit";
      this.formData = { ...row };
      this.formDataCopy = { ...row };
    },
    search() {
      this.queryPageList();
    },
    // 获取表单数据
    queryPageList() {
      console.log(this.querylist);
      let param = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        entity: {
          ...this.querylist,
          processBatchType: this.processBatchType
        }
      };
      processTaskApi.getListByPageConditon(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.page.total = data.totalElements;
          this.tableData = data.content;
        }
      });
    },
    // 显示添加弹出框
    add() {
      this.formDataCopy = {};
      this.getInputStorageNo();
      this.show = true;
      this.handle = "add";
    },
    // 批量删除
    del() {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          processTaskApi.batchDel(this.handleSelectList).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.queryPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    isDel() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

::v-deep .el-collapse-item__header {
  height: 0px;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 0px;
  bottom: -18px;
}

::v-deep .el-form-item__label {
  min-width: 120px !important;
  text-align: end;
}
.total {
  position: absolute;
  top: 25px;
  left: 300px;
}

::v-deep .el-form-item.is-error {
  .el-input__inner {
    border-color: #f56c6c !important;
  }
}
.botton {
  background-color: #0091b7;
}
.pointer {
  cursor: pointer;
}
.select-box-content-name {
  width: 120px;
  text-align: right;
}
::v-deep .content-manage {
  display: flex;
  flex-flow: column;
  height: 100%;
}
</style>
